<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>测试axios发出异步请求</h1>
<input type="button" value="发请求" onclick="fn()">
<h1>测试POST请求</h1>
<input type="button" value="post请求" onclick="postfn()">
<!--引入axios和vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
    function postfn(){
        //post请求如果需要传参，可以FormData对象传参
        let data = new FormData();
        data.append("info","xyz");
        axios.post("/helloAxios",data).then(function (response) {
            alert(response.data);
        })
    }
    function fn(){
        //发起异步请求
       /* axios.get("/helloAxios").then(function (response) {
            //请求成功后执行的代码，response代表响应对象
            alert(response.data);//response.data代表响应的数据
        }).catch( function (err) {
            //请求失败时执行的代码，err代表错误对象
            alert(err);
        })*/
        //如果请求出错时不需要做任何事情，可以省略后面catch
        //如果不写catch，出错了，需要在浏览器的控制台上看错误
        axios.get("/helloAxios?info=abc").then(function (response) {
            //请求成功后执行的代码，response代表响应对象
            alert(response.data);//response.data代表响应的数据
        })
    }
</script>

</body>
</html>